<template>
  <div class="pathPlan" title="路径预览">
    <div class="planchannel_inforation_map--addAouter" v-if="dialog">
      <h6>{{ enums.channelRouter(planNumber) }}</h6>
      <!-- 最优路劲航道规划 -->
      <div class="planchannel_inforation_map--addAouter_autoRouter" v-if="planNumber == 0">
        <div
          :class="{
            addAouter_autoRouter_start: true,
            'addAouter_autoRouter_start--befer': false,
          }"
        >
          <span>起点：</span>
          <p :class="{ dontContent: !isStartIdent }">
            {{ isStartIdent }}
          </p>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            @click="addReouterStartClick()"
            v-if="isStart"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="addReouterStartClick()"
            v-else
          ></el-button>
        </div>
        <div
          :class="{ addAouter_autoRouter_end: true, 'addAouter_autoRouter_start--befer': false }"
        >
          <span>终点：</span>
          <p :class="{ dontContent: !isEndIdent }">
            {{ isEndIdent }}
          </p>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            @click="addReouterEndClick()"
            v-if="isEnd"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="addReouterEndClick()"
            v-else
          ></el-button>
        </div>
      </div>
      <!-- 手动路径航道规划,在chart航图展示页面不会显示 -->
      
      <div class="planchannel_inforation_map--addAouter_is">
        <el-button type="primary" plain @click="channelAddClearFun()">取消</el-button>
        <el-button type="primary" plain @click="channelAddFun()">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import enums from '@/utils/enums';
export default {
  name: 'pathPlan',
  components: {},
  props: {
    dialog: {
      type: Boolean,
      //buttonClickData.channelAddData.dialog
    },
    planNumber: {
      type: String,
      // channelAddData.data.plan
    },

    isStartIdent:{
      type:String
      // buttonClickData.channelAddData.isStartData.ident
    },
    isStart:{
      type:Boolean
      // buttonClickData.channelAddData.isStart
    },
    isEndIdent:{
      type:String
      // buttonClickData.channelAddData.isEndData.ident
    },
    isEnd:{
      type:Boolean
      // buttonClickData.channelAddData.isEnd
    },
    addReouterStartClick: {
      type: Function,
      required: true,
    },
    addReouterEndClick: {
      type: Function,
      required: true,
    },
    channelAddClearFun: {
      type: Function,
      required: true,
    },
    channelAddFun: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      // enums文件导出一个对象，对象中包含所有从enums中得到的方法，调用方法获取数据，在这里导出是因为 vue 中template无法直接获取enums文件的数据，需要在data中设置一次，方法中直接使用enums即可，不需要加this,因为不是从data数据中获取的
      enums: enums,
    };
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// 路径操作框
.planchannel_inforation_map--addAouter {
  min-width: 150px;
  position: absolute;
  bottom: 20px;
  left: 0;
  background: rgba(200, 200, 200, 0.7);
  border-radius: 0 6px 6px 0;
  padding: 10px;
  h6 {
    text-align: center;
  }
  .planchannel_inforation_map--addAouter_ident {
    display: flex;
  }
  .planchannel_inforation_map--addAouter_autoRouter {
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 3px;
      height: 24px;
      p {
        min-width: 70px;
        height: 100%;
      }
      .dontContent {
        border-bottom: 1px solid #333;
        box-sizing: border-box;
      }
    }
  }
  .planchannel_inforation_map--addAouter_manualRouter {
    max-width: 210px;
    .addAouter_manualRouter-p {
      height: auto;
      width: 100%;
    }
    div {
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        padding: 2px;
        position: relative;
        p {
          margin: 0 3px;
          background: #333;
          color: #fff;
          padding: 2px 3px;
          font-size: 12px;
        }
        .manualRouter_div_li_div {
          position: absolute;
          width: 5px;
          top: -2px;
          right: 0px;
          font-size: 12px;
          cursor: pointer;
          z-index: 2;
        }
        .manualRouter_div_li_div:hover {
          color: red;
        }
      }
    }
  }
  .planchannel_inforation_map--addAouter_is {
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }
  .addAouter_autoRouter_start--befer {
    background: #333;
  }
  /deep/.el-button--small {
    padding: 4px;
  }
}
</style>
